<template>
    <view class="vue-tree">
        <!-- <NavTreeItem v-for="(item, index) in computedTreeData" :key="index" :tree-item-data="item" :active-id="activeId"
			@treeClickEvent="treeClickEvent" /> -->

        <view
            v-for="(item, index) in computedTreeData"
            :key="index"
            class="tree-item no-child"
            :class="{ expand: item.expand, active: activeId === item.id }">
            <view class="tree-content" @click="treeClickEvent(item)">
                <view class="border"></view>
                <text class="tree-label">{{ item.name }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import NavTreeItem from "@/components/product/nav-tree-item.vue"
export default {
    name: "navTree",
    components: {
        NavTreeItem,
    },
    props: {
        // 树形控件数据
        treeData: {
            type: Array,
            default() {
                return []
            },
        },
        activeId: {
            type: Number,
            default: -1,
        },
    },
    data() {
        return {}
    },
    mounted() {},
    computed: {
        computedTreeData() {
            const _arr = this.treeData
            this.initData(_arr, 0)
            return _arr
        },
    },
    methods: {
        initData(arr, level) {
            if (arr && arr.length > 0) {
                arr.forEach((element) => {
                    if (element && !element.level) {
                        element.level = level
                    }
                    if (element.expand === undefined) {
                        element.expand = false
                    }
                    if (element.children && element.children.length > 0) {
                        this.initData(element.children, level + 1)
                    }
                })
            }
        },
        foldSameParentItem(arr, level, id, expand) {
            if (arr && arr.length > 0) {
                arr.forEach((element) => {
                    if (element && element.level === level) {
                        if (element.id === id) {
                            element.expand = !expand
                        } else {
                            element.expand = false
                        }
                    } else if (element.children && element.children.length > 0) {
                        this.foldSameParentItem(element.children, level, id, expand)
                    }
                })
            }
        },
        treeClickEvent(item) {
            this.$forceUpdate()
            this.foldSameParentItem(this.treeData, item.level, item.id, item.expand)
            this.$emit("treeClickEvent", item, this.treeData)
        },
    },
}
</script>
<style lang="scss" scoped>
.vue-tree {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.sub-tree {
    display: none;
    .tree-item {
        .tree-content {
            .tree-label {
                &:after {
                    width: 6rpx;
                    height: 6rpx;
                    right: 12rpx;
                }
            }
        }
    }
}

.tree-item {
    .tree-content {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        &:active {
            background: rgba(#ffffff, 0.6);
        }
        .tree-label {
            font-size: $font-size-24;
            min-height: 98rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            position: relative;
            padding: 0 30rpx;
            text-align: center;

            &:after {
                content: "";
                display: inline-block;
                position: absolute;
                right: 16rpx;
                top: 40rpx;
                width: 6rpx;
                height: 6rpx;
                transform: rotate(45deg);
                border: 1px solid;
                border-color: transparent currentColor currentColor transparent;
            }
        }
    }
}

.expand {
    background: $color-white;

    & > .sub-tree {
        display: block;
    }

    & > .tree-content {
        .tree-label {
            &:after {
                transform: rotate(-135deg);
                top: 48rpx;
            }
        }
    }
}

.active {
    & > .tree-content {
        .border {
            background: $app-color-main;
        }

        .tree-label {
            font-weight: 700;
            color: $app-color-main;
            background: $color-white;
        }
    }
}

.no-child {
    .tree-content {
        .tree-label {
            &:after {
                content: none;
            }
        }
    }
}

.border {
    height: 40rpx;
    width: 12rpx;
    background: $transparent;
    position: absolute;
    left: -6rpx;
    top: 50%;
    margin-top: -20rpx;
    border-top-right-radius: 20rpx;
    border-bottom-right-radius: 20rpx;
    z-index: 1;
}
</style>
